<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>实名信息</span>
            </div>
        </template>
        <div class="tip" style="color: #7f7f7f;">
            <p><el-icon>
                    <InfoFilled />
                </el-icon>完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证</p>
        </div>
        <!-- 认证成功的结构，认证未成功的结构 -->
        <el-descriptions v-if="userInfo.authStatus == 1" class="margin-top" :column="1" border
            style="margin: 20px auto;">
            <el-descriptions-item label-align="center" width="30px">
                <template #label>
                    <div class="cell-item">
                        用户姓名
                    </div>
                </template>
                {{ userInfo.name }}
            </el-descriptions-item>
            <el-descriptions-item label-align="center" :width="30">
                <template #label>
                    <div class="cell-item">
                        证件类型
                    </div>
                </template>
                {{ userInfo.certificatesType == 10 ? "身份证" : "户口本" }}
            </el-descriptions-item>
            <el-descriptions-item label-align="center" :width="30">
                <template #label>
                    <div class="cell-item">
                        证件号码
                    </div>
                </template>
                {{ userInfo.certificatesNo }}
            </el-descriptions-item>
        </el-descriptions>
        <!-- 用户未验证 -->
        <el-form v-if="userInfo.authStatus == 0" style="width: 60%;margin: 20px auto;" label-width="90">
            <el-form-item label="用户姓名">
                <el-input placeholder="请输入用户姓名"></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
                <el-select placeholder="请选择证件类型">
                    <el-option label="身份证"></el-option>
                    <el-option label="户口本"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="证件号码">
                <el-input placeholder="请输入证件号码"></el-input>
            </el-form-item>
            <el-form-item label="上传证件">
                <el-upload list-type="picture-card">
                    <img src="../../../assets/images/auth_example.png" alt="" style="width: 100%;height: 100%;">
                </el-upload>
                <el-dialog>
                    <img w-full alt="Preview Image" />
                </el-dialog>
            </el-form-item>
            <el-form-item label="" prop="">
                <el-button type="primary" @click="">提交</el-button>
                <el-button type="" @click="">重写</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang='ts'>
import {
    InfoFilled,
    Plus
} from '@element-plus/icons-vue'
import { reqUserInfo } from '@/api/user';
import { onMounted, ref } from 'vue';
let userInfo = ref<any>({})
onMounted(() => {
    getUserInfo();
})
const getUserInfo = async () => {
    let result = await reqUserInfo()
    if (result.data.code === 200) {
        userInfo.value = result.data.data
    }
}
</script>

<style scoped lang="scss">
.box-card {
    .tip {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>